<template>
<div class="person-block-root">
  <DecoTitle label="相关人物" type="trig"></DecoTitle>
  <div class="avcont">
    <Person v-for="item in avs" class="avatar" :data="item"></Person>
  </div>
  <router-link class="more" to="/personlist">更多...</router-link>
</div>
</template>

<script>
import Person from './Person'
import DecoTitle from './DecoTitle'

export default {
  name: 'person-block',
  components: {Person, DecoTitle},
  data(){
    return {
      avs: []
    }
  },
  mounted(){
    fetch('/static/data-personlist.json').then(r=>r.json()).then(data=>{
      this.avs = data
    })
  }
}
</script>

<style scoped lang="stylus">
.person-block-root
  padding 45px 34px
  text-align center
  >.decotitle-root
    margin-bottom 45px
  >.more
    font-size 12px
    float right
    color #59b3ff
    text-decoration none
  
.avcont
  display flex
  flex-wrap wrap
  >.avatar
    margin-right 5%
    width 30%
    margin-bottom 27px
    &:nth-child(3n)
      margin-right 0

  
</style>